<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 继发：一件事情发生后，继而发生另一件事  同步  串联
        // 并发：同一时间执行多个任务            异步  并联

        // 4. 多个await关键字后面的异步操作，如果不存在继发关系，最好让他们同时执行

        const api_news = 'http://ajax-api.itheima.net/api/news'
        const api_books = 'http://ajax-api.itheima.net/api/books'
        const api_robot = 'http://ajax-api.itheima.net/api/robot?spoken=你好'

        async function sendRequest(url){
           return await fetch(url).then(res => res.json())
            // console.log(fetch(url).then(res => res.json()))
            // 1. fetch(url).then() 返回的是什么？ promsie对象
            // 2. let res = await fetch().then()  ==> res是promise对象的结果
            // 3. sendRequest() 它调用完，返回的 也是 promsie对象
        }

        // 继发：
        // 下一个请求的参数，如果是上一个接口返回值里面取
        ;(async () => {
            // await 会阻塞后面代码的执行 
            let books = await sendRequest(api_books)
            console.log(books)
            let news = await sendRequest(api_news)
            console.log(news)
            let robot = await sendRequest(api_robot)
            console.log(robot)
        })()

        // 并发 三个请求没有关联
        ;(async () => {
            let [books, news, robot] = await Promise.all([sendRequest(api_books),sendRequest(api_news),sendRequest(api_robot)])
            console.log(books, news, robot)
        })()

        //Q: 为什么这里写了一个立即执行函数？
        // async function demo(){
        //     let [books, news, robot] = await Promise.all([sendRequest(api_books),sendRequest(api_news),sendRequest(api_robot)])
        //     console.log(books, news, robot)
        // }
        // demo()
    </script>
</body>
</html>